<template>
    <hb-box :title="titleList">
        <ul :style="style.box">
            <li class="top flex">
                <span class="tr0 ilbk" v-text="Lang.table[lang][0]">时间</span>
                <span class="tr1 ilbk" v-text="Lang.table[lang][1]">登陆方式</span>
                <span class="tr2 ilbk">IP</span>
                <span class="tr3 ilbk" v-text="Lang.table[lang][2]">状态</span>
            </li>
            <li v-for="(v, i) in ilist" :key="i" :style="i === 0 ? style.firstItem : style.items" class="flex">
                <span class="tr0 ilbk" v-text="ilist[i][0]" />
                <span class="tr1 ilbk" v-text="ilist[i][1]" />
                <span class="tr2 ilbk" v-text="ilist[i][2]" />
                <span class="tr3 ilbk" v-text="ilist[i][3]" />
            </li>
        </ul>
    </hb-box>
</template>

<script>
import style from '../style'
import {lang_history} from './lang'
export default {
	data() {
		return {
			Lang: lang_history,
			style,
			ilist: [
				['2012-22-22 18-22-22', 'web', '47.52.117.217', '成功'],
				['2012-22-22 18-22-22', 'web', '47.52.117.217', '成功'],
				['2012-22-22 18-22-22', 'web', '47.52.117.217', '成功'],
				['2012-22-22 18-22-22', 'web', '47.52.117.217', '成功'],
			],
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		titleList() {
			return [
				{value: 'sign', txt: this.Lang.title[this.lang][0]},
				{value: 'safe', txt: this.Lang.title[this.lang][1]},
			]
		},
	},
	created() {},
	methods: {},
}
</script>

<style scoped>
.history {
}
.top {
	color: var(--txt);
	line-height: 40px;
}
.tr0,
.tr1,
.tr2 {
	width: 240px;
}
.tr3 {
	margin-left: auto;
}
</style>